<template>
  <!-- 个人数据页面 -->
  <div class="box">
    <div class="personal_top">
      <span class="left">{{data_time}}</span>
      <span
        class="right"
        @click="time=true"
      ><img src="@/static/img/icon/日历.png"></span>
    </div>
    <!-- 时间插件 -->
    <van-popup
      v-model="time"
      :safe-area-inset-bottom="true"
      :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
      :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="getTime_month"
        @cancel="time=false"
      />

    </van-popup>
    <!-- <van-calendar v-model="show" color="#07c160" /> -->
    <div class="personal_content">
      <span class="left"><i :class="checked==false?'active':''">奖</i>/<i :class="checked==true?'active':''">扣</i></span>
      <div class="right">
        <van-switch
          v-model="checked"
          size="24px"
          @change="show_checked"
        />
        <span>{{list.name}}({{list.monthScore}}分)/{{list.office}}</span>
      </div>

    </div>
    <div
      id="myChart"
      :style="{width: '100%', height: '300px',marginTop:'30px'}"
    ></div>
     <van-overlay
      :show="isShowloading"
      @click="isShowloading = false"
    >
      <div
        class="wrapper"
        @click.stop
      >
        <van-loading
          vertical
          type="spinner"
          size="50"
        >数据加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script type="text/javascript">
import { Switch, DatetimePicker, Popup, Overlay, Loading } from "vant";
export default {
  data() {
    return {
      isShowloading:false,
      checked: false,
      time: false,
      prizeList: [],
      buckleList: [],
      arr: [],
      list: [],
      minDate: new Date(2018, 0),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: ""
    };
  },
  created(){
     dd.biz.navigation.setTitle({
      title: "个人数据统计" //控制标题文本，空字符串表示显示默认文本
    });
  },
  mounted() {
    this.dataTime();
  },
  components: {
    [Switch.name]: Switch,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    [Loading.name]: Loading,
    [Overlay.name]: Overlay
  },
  methods: {
    // 当前时间
    dataTime() {
      const d = new Date();
      let yy = new Date().getFullYear();
      let mm = this.p(d.getMonth() + 1);
      let year = yy + "-" + mm;
      this.data_time = year;
      this.getPersonalData(year);
    },
    // 选择时间
    getTime_month(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = yy + "-" + mm;
      this.data_time = resDate;
      this.time = false;
      this.getPersonalData(resDate);
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    // 奖扣
    show_checked() {
      //  this.arr=this.prizeList
      if (this.checked == true) {
        this.arr = this.buckleList;
        this.drawLine();
      } else {
        this.arr = this.prizeList;
        this.drawLine();
      }
      // console.log(this.checked)
    },
    // 数据展示
    async getPersonalData(time) {
      this.isShowloading=true;
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      let year = time.split("-")[0];
      let month = time.split("-")[1];
      const res = await this.$http.get(
        `yuepoints/getPersonalData?corpId=${corpId}&userId=${userId}&year=${year}&month=${month}`
      )
      // console.log(res)
      .then(res=>{
        const {
            data: {totalScore},
            errcode,
            errmsg
          } = res.data;
        if(errcode == "0000"){
          this.isShowloading=false;
          this.prizeList = res.data.data.totalScore.prizeList;
          this.buckleList = res.data.data.totalScore.buckleList;
          this.arr = this.prizeList;
          this.list = res.data.data;
          this.drawLine();
        }else if(errcode == "1005"){
          this.isShowloading=false;
          this.$toast(errmsg);
        }
      })
     
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let arr = this.arr;
      let data_list = [];
      let data_name = [];
      for (let i = 0; i < arr.length; i++) {
        data_list.push({ value: arr[i].pro, name: arr[i].name });
        data_name.push({ name: arr[i].name });
      }
      let color = [
        "#97FFFF",
        "#9400D3",
        "#9370DB",
        "#8FBC8F",
        "#7FFFD4",
        "#87CEEB",
        "#7EC0EE",
        "#7CCD7C",
        "#71C671",
        "#7A378B",
        "#76EE00",
        "#7171C6",
        "#63B8FF",
        "#636363",
        "#68228B",
        "#575757",
        "#ABABAB",
        "#A0522D",
        "#A2CD5A",
        "#A2B5CD",
        "#A020F0",
        "#9F79EE",
        "#CD0000",
        "#CAE1FF",
        "#CAFF70",
        "#CD5555",
        "#CD6090",
        "#CD6839",
        "#CD69C9",
        "#CD853F",
        "#CDAA7D",
        "#CDB7B5",
        "#4A4A4A",
        "#4876FF",
        "#483D8B",
        "#458B74"
      ];
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: 60,
          bottom: 10,
          formatter: function(name) {
            for (var i = 0; i < data_list.length; i++) {
              if (name == data_list[i].name) {
                return name + " " + data_list[i].value + "%";
              }
            }
          },
          data: data_name
        },
        series: [
          {
            name: "个人数据统计",
            type: "pie",
            radius: "35%",
            color: color,
            center: ["30%", "45%"],
            data: data_list,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
   /deep/ .van-overlay {
    z-index: 2;
  }
  .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
  .personal_top {
    color: #0497ff;
    height: 6vh;
    line-height: 6vh;
    background: #fff;
    border-bottom: 1px solid silver;
    span:last-child {
      display: inline-block;
      height: 25px;
      margin-top: 5px;
      img {
        height: 100%;
      }
    }
  }
  .personal_content {
    height: 6vh;
    background: #fff;
    border-bottom: 1px solid #c0c0c08c;
    span:first-child {
      margin-top: 8px;
    }
    /deep/ .van-switch {
      top: 6px;
    }
  }
  .left {
    float: left;
    margin-left: 5vw;
  }
  .right {
    float: right;
    margin-right: 5vw;
  }
  i {
    font-style: normal;
  }
  .active {
    color: #0497ff;
  }
}
</style>
